<template>
  <div class="home">
    <header>
      <div class="header-box">
        <div class="logo">
          <img src="../assets/logo.png" alt />
        </div>
        <div class="input-box">
          <input type="text" v-model="value" placeholder="请输入关键字进行任务搜索" />
          <button @click="toSearch">搜索</button>
        </div>
        <div class="message">
          <img src="../assets/msg.png" alt />
        </div>
      </div>
    </header>
    
    <van-tabs
      v-model="active"
      animated
      line-width="25%"
      swipeable
      color="#faca2a"
      sticky
      offset-top="0px"
    >
      <van-tab title="全部">
        <div class="my-swipe">
          <div class="swip-box">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="msg">
            <ul>
              <li>新人指引</li>
              <li>
                <router-link to="/rankingList">收益排行榜</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="task">
          <div class="task-header">
            <p>全部任务</p>
          </div>
          <div class="task-list">
            <ul>
              <li
                v-for="(item,index) in taskArr"
                :key="item.task_id"
                :id="item.task_id"
                :data_price="item.price"
                :data_num="item.num"
                :class="`selection1-${index}`"
                @click="chooseTask(index)"
              >
                <div class="left">
                  <div class="image">
                    <img :src="`${item.imgUrl}`" alt />
                  </div>
                </div>
                <div class="right">
                  <div class="right-header">
                    <p>
                      {{item.title}}
                      <span>+{{item.price}}</span>
                    </p>
                  </div>
                  <div class="right-bottom">
                    <span class="type">{{item.classify}}</span>
                    <span class="num">剩余{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="砍价专区">
        <div class="task">
          <div class="task-header">
            <p>砍价任务</p>
          </div>
          <div class="task-list">
            <ul>
              <li
                v-for="(item,index) in kanjiaArr"
                :key="item.task_id"
                :id="item.task_id"
                :data_num="item.num"
                :data_price="item.price"
                :class="`selection2-${index}`"
                @click="chooseTask2(index)"
              >
                <div class="left">
                  <div class="image">
                    <img :src="`${item.imgUrl}`" alt />
                  </div>
                </div>
                <div class="right">
                  <div class="right-header">
                    <p>
                      {{item.title}}
                      <span>+{{item.price}}</span>
                    </p>
                  </div>
                  <div class="right-bottom">
                    <span class="type">{{item.classify}}</span>
                    <span class="num">剩余{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="点赞专区">
        <div class="task">
          <div class="task-header">
            <p>点赞任务</p>
          </div>
          <div class="task-list">
            <ul>
              <li
                v-for="(item,index) in likeArr"
                :key="item.task_id"
                :id="item.task_id"
                :data_num="item.num"
                :data_price="item.price"
                :class="`selection3-${index}`"
                @click="chooseTask3(index)"
              >
                <div class="left">
                  <div class="image">
                    <img :src="`${item.imgUrl}`" alt />
                  </div>
                </div>
                <div class="right">
                  <div class="right-header">
                    <p>
                      {{item.title}}
                      <span>+{{item.price}}</span>
                    </p>
                  </div>
                  <div class="right-bottom">
                    <span class="type">{{item.classify}}</span>
                    <span class="num">剩余{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="下载专区">
        <div class="task">
          <div class="task-header">
            <p>下载任务</p>
          </div>
          <div class="task-list">
            <ul>
              <li
                v-for="(item,index) in downloadArr"
                :key="item.task_id"
                :id="item.task_id"
                :data_num="item.num"
                :data_price="item.price"
                :class="`selection4-${index}`"
                @click="chooseTask4(index)"
              >
                <div class="left">
                  <div class="image">
                    <img :src="`${item.imgUrl}`" alt />
                  </div>
                </div>
                <div class="right">
                  <div class="right-header">
                    <p>
                      {{item.title}}
                      <span>+{{item.price}}</span>
                    </p>
                  </div>
                  <div class="right-bottom">
                    <span class="type">{{item.classify}}</span>
                    <span class="num">剩余{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    
    <div class="up-box"></div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import MyFooter from "../components/MyFooter.vue";
import axios from "axios";
import { baseURL } from "../http/require.js";
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  components: { MyFooter },
  data() {
    return {
      active: 0,
      images: [
        `${baseURL}/static/image/1.png`,
        `${baseURL}/static/image/3.png`,
        `${baseURL}/static/image/4.png`,
      ],
      taskArr: "",
      imgUrl: "",
      downloadArr: [],
      likeArr: [],
      kanjiaArr: [],
      value:'',
      valueArr:[]
    };
  },
  methods: {
    innit() {
      const toast = Toast.loading({
         duration: 0, // 持续展示 toast
         forbidClick: true,
         message: "加载中..."
     });
      axios.get(`${baseURL}/task/taskList`).then(response => {
        // console.log(response);
        let data = response.data;
        if (data.code == 200) {
          
          this.taskArr = data.rows;
          Toast.clear();
          this.taskArr.map(item => {
            // console.log(item);
            switch (item.classify) {
              case "下载专区":
                this.imgUrl = `${baseURL}/static/image/download.png`;
                item["imgUrl"] = this.imgUrl;
                this.downloadArr.push(item);
                break;
              case "点赞专区":
                this.imgUrl = `${baseURL}/static/image/like.png`;
                item["imgUrl"] = this.imgUrl;
                this.likeArr.push(item);
                break;
              case "砍价专区":
                this.imgUrl = `${baseURL}/static/image/kanjia.png`;
                item["imgUrl"] = this.imgUrl;
                this.kanjiaArr.push(item);
                break;
            }
            // return item
          });
          // console.log(this.downloadArr);
        }
      });
    },
    chooseTask(index) {
      const selection = document.querySelector(`.selection1-${index}`);
      let taskId = selection.getAttribute("id");
      let price = selection.getAttribute("data_price");
      let num = selection.getAttribute("data_num");
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$store.dispatch("task/setPriceAsync", price);
      this.$store.dispatch("task/setNumAsync", num);
      this.$router.push("/taskDetail");
    },
    chooseTask2(index) {
      const selection = document.querySelector(`.selection2-${index}`);
      let taskId = selection.getAttribute("id");
      let price = selection.getAttribute("data_price");
      let num = selection.getAttribute("data_num");
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$store.dispatch("task/setPriceAsync", price);
      this.$store.dispatch("task/setNumAsync", num);
      this.$router.push("/taskDetail");
    },
    chooseTask3(index) {
      const selection = document.querySelector(`.selection3-${index}`);
      let taskId = selection.getAttribute("id");
      let price = selection.getAttribute("data_price");
      let num = selection.getAttribute("data_num");
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$store.dispatch("task/setPriceAsync", price);
      this.$store.dispatch("task/setNumAsync", num);
      this.$router.push("/taskDetail");
    },
    chooseTask4(index) {
      const selection = document.querySelector(`.selection4-${index}`);
      let taskId = selection.getAttribute("id");
      let price = selection.getAttribute("data_price");
      let num = selection.getAttribute("data_num");
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$store.dispatch("task/setPriceAsync", price);
      this.$store.dispatch("task/setNumAsync", num);
      this.$router.push("/taskDetail");
    },
    toSearch() {
      // console.log(this.value);
      if(this.value.length !=0 ){
axios.post(`${baseURL}/task/check_task`,
      {value:this.value},
      {
                    headers: "application/x-www-form-urlencoded"
                  }
      )
      .then(response =>{
        if(response.data.code == 200) {
          this.valueArr = response.data.rows
          this.$router.replace({name:'search',query:{value:this.value,valueArr:this.valueArr}})

        }
      })
      }
      
    },
    
  },
  created() {
    this.innit();
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.home {
  width: 100%;
  header {
    width: 100%;
    height: 50px;
    background-color: #faca2a;
    .header-box {
      width: 100%;
      height: 100%;
      display: flex;
      text-align: center;
      line-height: 50px;
      position: relative;

      .logo {
        flex-basis: 20%;
        width: 100%;
        height: 100%;
        img {
          width: 40px;
          height: 40px;
          vertical-align: middle;
        }
      }
      .input-box {
        flex-basis: 70%;
        height: 100%;
        line-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        input {
          width: 80%;
          height: 33px;
          border-radius: 20px;
          padding-left: 15px;
          font-size: 14px;
          border: 0;
          outline: none;
          background-color: #fff;
          color: #ccc;
        }
        button {
          font-size: 14px;
          border: 0;
          background-color: transparent;
          color: #fff;
        }
      }
      .message {
        flex-basis: 10%;
        width: 100%;
        height: 100%;
        img {
          width: 28px;
          height: 28px;
          vertical-align: middle;
        }
      }
    }
  }
  
  .my-swipe {
    width: 100%;
    height: 240px;
    background-color: #fff;
    margin-top: 10px;
    .swip-box {
      width: 95%;
      height: 180px;
      border-radius: 10px;
      margin: 0 auto;
      overflow: hidden;
      // line-height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .msg {
      width: 100%;
      height: 60px;
      ul {
        width: 100%;
        display: flex;
        li {
          flex-grow: 1;
          text-align: center;
          line-height: 60px;
          font-size: 18px;
          font-weight: 600;
          a {
            display: block;
          }
        }
      }
    }
  }
  .task {
    width: 100%;
    background-color: #ccc;
    padding-top: 10px;
    .task-header {
      width: 100%;
      height: 40px;
      background-color: #fff;
      padding-left: 10px;
      line-height: 40px;
      font-weight: 600;
      font-size: 16px;
    }
    .task-list {
      width: 100%;
      ul {
        width: 100%;
        background-color: #fff;
        li {
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: center;
          border-bottom: 1px solid #ccc;
          margin-bottom: 10px;
          .left {
            flex-grow: 0.3;
            height: 100%;
            .image {
              width: 65px;
              height: 65px;
              line-height: 65px;
              margin: 0 auto;
            }
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
          .right {
            flex-grow: 2;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            line-height: 200%;
            p {
              font-size: 18px;
              position: relative;
              span {
                position: absolute;
                right: 10px;
                color: red;
                font-weight: 600;
              }
            }
            .type,
            .num {
              font-size: 12px;
              background-color: #ccc;
              padding: 3px 3px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  .up-box {
    width: 100%;
    height: 60px;
  }
}
</style>